<template>
  <view class="navigator-page">
    <view class="page-title">navigator 页面跳转</view>

    <view class="btn-group">
      <navigator url="/pages/index/index" hover-class="navigator-hover">
        <button type="default">跳转到index</button>
      </navigator>

      <navigator url="/pages/login/login" open-type="redirect">
        <button type="default">跳转到登录页</button>
      </navigator>
	  <navigator url="/pages/city/city" hover-class="navigator-hover">
	    <button type="default">跳转到城市探索</button>
	  </navigator>
	  <navigator url="/pages/cardPage/cardPage" hover-class="navigator-hover">
	    <button type="default">跳转到新闻卡片</button>
	  </navigator>
	  <navigator url="/pages/emjor/emjor" hover-class="navigator-hover">
	    <button type="default">跳转到emjor</button>
	  </navigator>
	  <navigator url="/pages/weather/weather" hover-class="navigator-hover">
	    <button type="default">跳转到天气</button>
	  </navigator>
	  <navigator url="/pages/downloadFile/downloadFile" hover-class="navigator-hover">
	    <button type="default">跳转到下载图片</button>
	  </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped>
.navigator-page {
  padding: 20rpx;
  background-color: #fff;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
  line-height: 40rpx;
}

.highlight {
  color: #007AFF;
  font-weight: 500;
}

.btn-group navigator {
  display: block;
  margin-bottom: 20rpx;
}
</style>